<template>
  <el-card v-loading="loading">
    <el-tabs
      v-model="tabsValue"
      style="height: 100%"
      class="demo-tabs"
      @tab-change="handleChange"
    >
      <el-tab-pane
        v-for="item in tabList"
        :key="item.value"
        :name="item.value"
        :label="item.label"
      >
        <el-table :data="tableData" stripe style="width: 100%" max-height="500">
          <el-table-column prop="symbol" label="股票代码" fixed width="120px">
            <template #default="scope">
              <span style="color: #409eff; cursor: pointer">{{
                scope.row.symbol
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="简码">
            <template #default="scope">
              <span style="color: #e6a23b; cursor: pointer">{{
                scope.row.code
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="trade" label="最新价" />
          <el-table-column prop="pricechange" label="涨跌额">
            <template #default="scope">
              <span
                :style="
                  Number(scope.row.pricechange) < 0
                    ? 'color: #67c23a;'
                    : 'color: #f56c6c;'
                "
                >{{ scope.row.pricechange }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="changepercent" label="涨跌幅">
            <template #default="scope">
              <span
                :style="
                  Number(scope.row.changepercent) < 0
                    ? 'color: #67c23a;'
                    : 'color: #f56c6c;'
                "
                >{{ scope.row.changepercent }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="buy" label="买入" />
          <el-table-column prop="sell" label="卖出" />
          <el-table-column prop="settlement" label="昨收" />
          <el-table-column prop="open" label="今开" />
          <el-table-column prop="high" label="最高" />
          <el-table-column prop="low" label="最低" />
          <el-table-column prop="volume" label="成交量" />
          <el-table-column prop="amount" label="成效额" width="130px" />
          <el-table-column prop="ticktime" label="时间" />
        </el-table>
        <el-button
          @click="handleMore"
          style="
            width: 100%;
            text-align: center;
            margin-top: 20px;
            margin-bottom: 20px;
          "
          type="primary"
          link
        >
          加载更多
        </el-button>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>
<script setup lang="ts">
import { reqStockList } from "@/api/web/stock";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
const tabsValue = ref("1");
const stock = ref("");
const page = ref(1);
const pageSize = ref(20);
const loading = ref(false);
const tabList = ref([
  {
    label: "沪股列表",
    value: "1",
  },
  {
    label: "深股列表",
    value: "2",
  },
]);
const tableData = ref([] as any);
const handleChange = () => {
  tableData.value = [];
  inintData();
};
const handleMore = () => {
  page.value = page.value + 1;
  pageSize.value = pageSize.value + 20;
  inintData();
};
onMounted(() => {
  inintData();
});
const inintData = async () => {
  loading.value = true;
  const res = await reqStockList(
    tabsValue.value,
    stock.value,
    page.value,
    pageSize.value,
  );
  if (res.code === 200) {
    if (res.data) {
      tableData.value = tableData.value.concat(res.data);
      loading.value = false;
    } else {
      ElMessage({
        type: "error",
        message: res.msg,
      });
      loading.value = false;
    }
  } else {
    ElMessage({
      type: "error",
      message: res.msg,
    });
    loading.value = false;
  }
};
</script>
<style scoped lang="scss"></style>
